<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <!-- <script src="./vuex.min.js"></script> -->
    <script src="./vue-router.min.js"></script>
    <script>
        window.onload=function(){
            //1.定义组件
            var student={
                template:`
                    <div>
                        <h2>student-list--</h2>
                    </div>
                `
            }
            var teacher={
                created(){
                    alert(this.$route.query.id)
                },
                template:`
                    <div>
                        <h2>teacher-list--</h2>
                    </div>
                `
            }
            var user={
                created(){
                    alert(this.$route.params.id)
                },
                template:`
                    <div>
                        <h2>user-list--</h2>
                    </div>
                `
            }
            //2.定义路由
            var router=new VueRouter({
                routes:[{
                    path:'/student',
                    name:student,
                    component:student
                },{ 
                    path:'/teacher',
                    name:'teacher',
                    component:teacher
                },{ 
                    path:'/user',
                    name:'user',
                    component:user
                }]
            });
            //3.挂载路由
            new Vue({
                el:'#app',
                methods:{
                    handler1(){
                        this.$router.push('/student');
                        console.log(history.length)
                    },
                    handler2(){
                        this.$router.replace({path:'/teacher',query:{id:1}})
                    },
                    handler3(){
                        // this.$router.push('/user')
                        this.$router.push({name:'user',params:{id:10}})
                    }
                },
                router
            });
        }
    </script>
</head>
<body>
    <div id="app">
        <h1>编程路由</h1>
        <button @click='handler1'>student</button>
        <button @click='handler2'>teacher</button>
        <button @click='handler3'>user</button>
        <div>
            <router-view></router-view>
        </div>
    </div>
</body>
</html>